<template>
    <div class="container">
        <div :class="['item',hover==index?'select':'']" @click="hover = index;getInfo(item)"  v-for="(item,index) in data" :key="index">
            <div>
                <span class="badge">{{item.infoCount}}</span>
                <img :src="item.img" alt="item">
            </div>
            <div>
                <h5>{{item.title}}</h5>
                <div>
                    <p>{{item.text}}</p>
                    <span :class="['badge',item.status==1?'onLine':'']">{{item.status==1?"在线":"离线"}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>    
import pop from "./pop.vue"
// import init from '../js/init.js' //引入信息配置

// import func from './vue-temp/vue-editor-bridge';
export default {
    data(){
        return{
            info:{},
            hover:0,
            targetId:0,
            infoList:this.$store.state.infoList,
            data:[
                {
                    id:"token_2",
                    status:1,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院1",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:"token_2",
                    status:0,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院2",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:"token",
                    status:1,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院3",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
                {
                    id:"token",
                    status:0,
                    time:"1min",
                    infoCount:2,
                    title:"清华计算机院4",
                    img:"../src/images/t3.png",
                    text:"清华计算机院清华计算机院清华计算机院清华计算机院",

                },
            ]
        }
    },
    created(){
        //点击沟通时传一个默认的targetId 从而打开默认选中的哪人的聊天记录
        this.$store.commit("setTargetId",this.data[this.hover])
    },
    methods:{
       pops:function(){
           this.info = {
                close:"关闭",
                confirm:"确定",
                title:"创建群组",
                groupName:"群名称",
                groupProfile:"群简介"
           }
       },
       getInfo:function(datas){
            this.targetId = datas.id
            console.log(datas)
            this.$store.commit("setTargetId",datas)
       }
    },
    computed : {
        // task () {
        //     return JSON.parse(this.$store.state.infoList)
        // }    
    },
    watch:{
        // task :function(a,b) {
        //     // console.log(a,b)
        // }    
    },
    components:{
        pop
    }
}
</script>
<style scoped>
    .container{
        height: 500px;
        overflow: auto;
        padding-left: 0;
        padding-right: 0;
        background:transparent
    }
    .item{
        padding: 10px;
        margin: 20px 0;
        display: flex;
        cursor: pointer;
    }
    .item>div:first-child{
        position: relative;
    }
    .item>div:first-child>img{
        width: 54px;
        height: 54px;
        border-radius: 50%;
    }
    .item>div:last-child{
        width: calc(100% - 54px);
        color: #9bacbc;

        padding-left: 18px;
    }
    .item>div:last-child>div{
        display: flex;
        font-size: 12px;
        justify-content: space-between
    }
    .item>div:last-child h5{
        color: #8ca1b6;
    }
    .item>div:last-child p{
        width: 78%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

    }
    .item>div>.badge{
        top: 0;
        right: -4px;
        color: #fff;
        position: absolute;
        background: #2f97de;
    }
    .item>div>div>.badge{
        line-height: 2;
    }
    .select{
        background: #d1e8ee;
        box-sizing: border-box;
        border-left: 1px solid #3198db ; 
    }
    .onLine{
        background: #5cb85c
    }
</style>
